import { RouteObject } from "react-router";
import { ReactNode, lazy, Suspense } from "react";
import { Spin } from "antd";

import AppLayout from "../AppLayout";

const Login = lazy(() => import('../pages/Login'));
const Home = lazy(() => import('../pages/Home'));
const User = lazy(() => import('../pages/User'));
const Detail = lazy(() => import('../pages/Detail'));
const Add = lazy(() => import('../pages/Add'));
const Delete = lazy(() => import('../pages/Delete'));

const lazyLoad = (children: ReactNode): ReactNode => {
    return (
        <Suspense fallback={<Spin />}>
            {children}
        </Suspense>
    )
}

const router: RouteObject[] = [
    {
        path: "/",
        element: <AppLayout />,
        children: [
            {
                index: true,
                element: lazyLoad(<Home />)  // 根路径下默认渲染的组件
            },
            {
                path: "/user/list",
                element: lazyLoad(<User />)
            },
            {
                path: "/user/detail/:id",
                element: lazyLoad(<Detail />)
            },
            {
                path: "/user/add",
                element: lazyLoad(<Add />)
            }, {
                path: "/user/delete",
                element: lazyLoad(<Delete />)
            },
        ]
    },
    {
        path: "/login",
        element: lazyLoad(<Login />)
    }
];

export default router;